<template>
  <view class="turnmoney">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">
      </view>
      <view class="topitem" @click="toturnmoney()">
        <view style="width: 20%;position: relative;">
          <image src="../../static/resort/fanhui.png" mode="" style="width: 18rpx;height: 36rpx;"> </image>
        </view>
        <view class="toptit">
          <view class="flex">
            <view class="text">
              <!-- 这是个社群(240) -->
            </view>
            <!-- <image src="../../static/message/donotdisturb.png" mode="" class="lingdang"></image> -->
          </view>
          <view class="huise">
            <!-- 备注名称显示 -->
          </view>
        </view>
        <view style="width: 20%;text-align: right;">
          <!-- <image src="../../static/message/three_drop.png" style="width: 40rpx;height: 14rpx;" mode="" -->
          <!-- @click="tomessage()"></image> -->
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 150rpx;">

    </view>
    <view class="returnimg">
      <!-- <image src="../../static/message/more.png" class="more" mode=""></image> -->
    </view>
    <view class="turnmoney-top">
      <image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
      <view class="turnpeople">
        隔壁美女小美（**丽）
      </view>
    </view>
    <!-- 转账金额 -->
    <view class="amount">
      <view class="amount-text">
        转账金额
      </view>
      <view class="money" @click="show = true">
        <view class="money-logo">
          ￥
        </view>
        <view class="input-money">
          <u-input v-model="value1" :type="type" border="none" id="input" placeholder="" />
        </view>
      </view>

      <view class="text-flex">
        <view class="text1" @click="show1 = true">
          {{show3}}
        </view>
        <!-- 添加转账声明 -->
        <u-popup :show="show1" @close="close" @open="open" :round="10">
          <view class="amount-popup">
            <view class="amount-text">
              转账声明
            </view>
            <view class="text">
              <u-input v-model="show3" :type="type1" border="none" id="input" placeholder="收款双方可见" />
            </view>
            <view class="button">
              <u-button text="取消" class="button1" type="error" :plain="true"></u-button>
              <u-button text="确定" class="button2" type="error"></u-button>
            </view>
          </view>
        </u-popup>
        <!-- 添加转账声明 -->
        <view class="text2">
          查看账户余额
        </view>
      </view>
    </view>
    <!-- 转账金额 -->
    <!-- 数字键盘 -->
    <view class="keyboard" :show="show">
      <!-- <u-keyboard ref="uKeyboard" mode="number" @close="close()" :show="show" @change="valChange" @confirm="confirm()"
        @backspace="backspace"></u-keyboard> -->
      <view class="top">
        <u-button text="1"></u-button>
        <u-button text="2"></u-button>
        <u-button text="3"></u-button>
        <u-button text="×"></u-button>
      </view>

      <view class="zuoyou">
        <view class="left">
          <u-button text="4"></u-button>
          <u-button text="5"></u-button>
          <u-button text="6"></u-button>
          <u-button text="7"></u-button>
          <u-button text="8"></u-button>
          <u-button text="9"></u-button>
          <u-button text="0" class="button1"></u-button>
          <u-button text="." class="button2"></u-button>
        </view>
        <view class="right">
          <u-button text="转账" type="error" @click="confirm"></u-button>
        </view>
        <!-- 转账 -->
        <view class="transfer">
          <u-popup :show="show4" @close="close1()" @open="open()" :round="10">
            <view class="password">
              <view class="top">
                <image src="../../static/resort/close.png" mode="" class="close"></image>
                <view class=" title">
                  请输入支付密码
                </view>
              </view>
              <view class="con">
                <view class="text1">
                  向隔壁王大美（**丽）转账
                </view>
                <view class="text2">
                  ￥{{value1}}
                </view>
              </view>
              <view class="con-bottom">

                <view class="left">
                  支付方式
                </view>
                <view class="right">
                  <uni-data-picker popup-title="选择支付方式" style="font-size: 25rpx;" v-model="value2" @change="onchange"
                    :localdata="dataTree">
                    {{value2}}
                    <view class="picker">
                      <image :src="dataTree.img" class="fangshi"></image>
                      <view class="text">
                        {{dataTree.text}}
                      </view>
                    </view>
                  </uni-data-picker>
                </view>
              </view>
              <!-- box -->
              <view class="huise-for">
                <view class="" v-for="(item,index) in 6" :key="6">
                  <view class="box">

                  </view>
                </view>
              </view>
              <view class="buttonnumber">
                <view v-for="(item,index) in NumberList" :key="index">
                  <u-button class="button" style="width: 220rpx;">{{item.text}}</u-button>
                </view>
              </view>
            </view>

          </u-popup>
        </view>
        <!-- 转账 -->
      </view>
    </view>
    <!-- 数字键盘 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        value1: '',
        type: 'number',
        type1: 'text',
        show: false,
        show1: false,
        show3: "添加转账声明",
        show4: false,
        value2: "微信",
        dataTree: [{
            // text: "我的账户余额",
            // disable: true,
            img: "/static/message/yellow-money.png",
            value2: "我的账户余额",
            children: [{
                text: "微信",
                value: "微信",
                // disable: true
              },
              {
                text: "我的账户余额",
                value: "我的账户余额",
                // disable: true
              },
              {
                text: "支付宝",
                value: "支付宝",
                // disable: true
              }
            ]
          },

        ],
        NumberList: [{
            text: "1",
          }, {
            text: "2",
          }, {
            text: "3",
          }, {
            text: "4",
          }, {
            text: "5",
          }, {
            text: "6",
          }, {
            text: "7",
          }, {
            text: "8",
          }, {
            text: "9",
          },
          {
            text: "",
          }, {
            text: "0",
          }, {
            text: "×",
          },
        ]
      };
    },
    onReady() {
      // 如果想一进入页面就打开键盘，请在此生命周期调用
      // this.show = true;
    },
    methods: {

      confirm() {
        this.show4 = true
        if (this.value1 < 0.01) {
          uni.showToast({
            title: '转账最低不低于0.01',
            icon: "none",

          });
        } else if (this.value1 > 20000) {
          uni.showModal({
            title: '单日转账最高金额为20000元',
            showCancel: false,
            confirmText: '知道了',
          });
        }

      },
      toturnmoney() {
        uni.navigateBack({
          delta: 1
        })
      },
      open() {
        // console.log('open');
      },
      close() {
        this.show1 = false
        // this.show4 = false
        // console.log('close');
      },
      close1() {
        // this.show1 = false
        this.show4 = false
        // console.log('close');
      },
      onchange(e) {
        const value2 = e.detail.value2
      },
      onpopupopened(e) {
        console.log('popupopened');
      },
      onpopupclosed(e) {
        console.log('popupclosed');
      },
      onchange(e) {
        console.log('onchange:', e);
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F5F5F5;
  }

  // 头部
  .topbox {
    width: 100vw;
    // background-color: white;
    background-color: #F5F5F5;
    ;
    position: fixed;
    z-index: 99;

    .top-top {
      width: 100%;
      height: var(--status-bar-height);
    }

    .topitem {
      // border-bottom: solid 2rpx #E5E5E5;
      width: 100%;
      height: 110rpx;
      // background-color: white;
      display: flex;
      padding: 20rpx 50rpx;
      box-sizing: border-box;
      align-items: center;

      .addfriend {
        position: absolute;
        top: 50rpx;
        left: 0;
        background-color: #505050;
        width: 240rpx;
        height: 220rpx;
        border-radius: 20rpx;

        .afone {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
          border-bottom: solid #F5F5F5 2rpx;
        }

        .aftwo {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
        }
      }

      .toptit {
        width: 60%;
        text-align: center;
        // margin: auto;

        .flex {
          margin-top: 10rpx;
          // border: 1px solid #505050;
          margin: auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;

          .text {
            font-size: 33rpx;
            margin-right: 10rpx;
          }

          .lingdang {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .huise {
          font-size: 23rpx;
          color: #999;
        }
      }
    }
  }

  // 头部
  .turnmoney {
    // width: 90vw;
    margin: auto;
    padding: 0rpx 0 0;
  }

  .returnimg {
    width: 90vw;
    margin: auto;

    .more {
      width: 18rpx;
      height: 36rpx;
    }
  }

  .turnmoney-top {
    width: 100%;
    margin: auto;
    text-align: center;
    // border-bottom: 60rpx;

    .img1 {
      width: 108rpx;
      height: 108rpx;
      margin-bottom: 30rpx;
    }

    .turnpeople {
      color: rgb(51, 51, 51);
      text-align: center;
      font-family: Noto Sans SC;
      font-size: 20px;
      font-weight: 400;
      // margin-bottom: ;
    }
  }

  // <!-- 转账金额 -->
  .amount {
    background-color: #fff;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    margin-top: 80rpx;
    padding: 5%;
    height: 35vh;

    .amount-text {
      color: rgb(51, 51, 51);
      font-family: Noto Sans SC;
      font-size: 32rpx;
      margin-bottom: 40rpx;
    }

    .money {
      // width: ;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #ccc;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .money-logo {
        font-size: 70rpx;
        font-weight: bold;
      }

      .input-money {
        // font-size: 200rpx;

        #input {
          width: 100%;
          // height: 100%;
          height: 80rpx;
          // border: 2rpx solid #000;
        }
      }
    }


    .text-flex {
      display: flex;
      justify-content: space-between;

      // <!-- 添加转账声明 -->
      .amount-popup {
        width: 90%;
        margin: auto;
        padding: 20rpx 0;

        .amount-text {
          margin-bottom: 15rpx;
        }

        .text {
          background-color: #F5F5F5;
          height: 160rpx;
          width: 100%;
          display: flex;
          align-items: center;
          border-radius: 10rpx;
          padding: 0 10%;
          box-sizing: border-box;
          margin-bottom: 40rpx;

          #input {
            width: 60%;
            margin: auto;
            // p: 50%;
            // border: 1px solid;
          }
        }

        .button {
          display: flex;
          justify-content: space-between;

          button {
            width: 40%;
          }
        }
      }

      // <!-- 添加转账声明 -->
      .text2 {
        color: #2BA8FB;

      }
    }
  }

  // <!-- 转账金额 -->
  // 键盘
  .keyboard {
    background-color: #F5F5F5;
    padding: 10rpx;
    // border: 1px solid #505050;
    // height: 50vh;

    .top {
      display: flex;
      justify-content: space-between;

      button {
        width: 24%;
      }
    }

    .zuoyou {
      display: flex;
      justify-content: space-between;

      .left {
        // margin-top: 10rpx;
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        button {
          margin-top: 10rpx;
          width: 32%;
        }

        .button1 {
          width: 65%;
        }
      }

      .right {
        width: 25%;

        button {
          margin-top: 10rpx;
          width: 100%;
          height: 240rpx;
        }
      }
    }
  }

  // 键盘
  // 密码
  .transfer {
    .password {
      width: 90%;
      margin: auto;
      padding: 20rpx 0;
      height: 59vh;

      .top {
        margin-bottom: 60rpx;
        display: flex;
        // justify-content: space-around;
        // border: 1px solid;
        width: 70%;
        // margin: auto;

        .close {
          width: 32rpx;
          height: 32rpx;
        }

        .title {
          font-size: 36rpx;
        }

      }

      .con {
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #ccc;
        margin: auto;
        text-align: center;
        margin-bottom: 15rpx;

        .text1 {
          font-size: 36rpx;
          margin-bottom: 25rpx;
        }

        .text2 {
          font-size: 70rpx;
          font-weight: bold;
        }
      }

      .con-bottom {
        display: flex;
        justify-content: space-between;

        .right {
          font-size: 30rpx;

          .picker {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .fangshi {
              width: 30rpx;
              height: 30rpx;
            }
          }
        }
      }
    }

    .huise-for {
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin: auto;

      .box {
        background-color: #ccc;
        width: 80rpx;
        height: 90rpx;
      }
    }


  }

  .buttonnumber {
    margin-top: 50rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // border: 1px solid;

    .buttonnumber>view {
      // width: 33%;
    }

    .button {
      // width: 100%;
    }
  }

  // 密码
</style>